<template>
  <div class="location" >
    <input-plane @click.native="locate" icon="icondingwei" :label="btnTxt">
      <div class="con">
        <span class="text" v-if="value" >{{value?value:this.lat}}</span>
      </div>
    </input-plane>
    <span class="remark" v-if="!value">若没有获取到定位,重进当前页面解决</span>
  </div>
</template>

<script>
import inputPlane from '../../components/base/input-plane'
import { getConfig } from '../../api/wx'
import { getAddress } from '../../map'
import Wx from '../../wx'
import { showError, showInfo } from '@/toast'
export default {
  created () {
    if (!this.value) {
      this.locate()
    }
    // 每三秒定位一次
    // const inter = setInterval(() => {
    //   if (this.lat) {
    //     clearInterval(inter)
    //   } else {
    //     this.locate()
    //   }
    // }, 3000)
  },
  computed: {
    btnTxt () {
      if (!this.config) {
        return '等待'
      } else {
        if (this.lat) {
          return '位置'
        } else {
          return '定位'
        }
      }
    }
  },
  data () {
    return {
      value: null,
      config: null,
      lat: null,
      lon: null,
      address: null,
      names: null
    }
  },
  components: {
    inputPlane
  },
  methods: {
    show () {
      if (!this.config) {
        showError('微信尚未配置')
      }
      Wx.config(this.config).then(() => {
        // const coordtransform = require('coordtransform')
        // const gcj = coordtransform.wgs84togcj02(this.lat, this.lon)
        // Wx.openLocation(this.lat, this.lon)
      })
      // if (!this.names) {
      //   this.locate().then(() => {
      //     this.show()
      //   })
      // }
      // if (!this.picker) {
      //   this.picker = this.$createPicker({
      //     title: 'Picker',
      //     data: [this.names],
      //     onSelect: this.selectHandle
      //   })
      // }
      // this.picker.show()
    },
    selectHandle (selectedVal, selectedIndex, selectedText) {
      const value = this.address + ' ' + selectedText.join()
      this.$emit('input', value)
    },
    locate () {
      getConfig().then(res => {
        this.config = res.data
        Wx.config(this.config, false).then(() => {
          Wx.location().then(res => {
            this.lat = res.latitude
            this.lon = res.longitude
            getAddress(res.latitude, res.longitude).then(res => {
              this.value = res.detail.addressComponents.city + res.detail.addressComponents.district + res.detail.addressComponents.town + res.detail.nearPois[0].name
              showInfo('地址获取成功' + this.value)
              this.$emit('locate')
              this.$emit('input', this.value)
              // this.value = res.detail.address
              // this.value = this.lat + ' ' + this.lon
              // this.names = res.detail.nearPois.map(poi => {
              //   return {
              //     text: poi.name,
              //     value: poi.name
              //   }
              // })
            }).catch(res => {
              alert(res)
            })
          })
        }).catch(res => {
          showError('请重进,重新定位' + res)
        })
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .remark
    font-size 15px
    color:#55545d
    margin-left 10px
  .con
    display flex
    align-items center
    height 100%
    .text
      font-size:12px;
      font-family:PingFang SC;
      padding-left 20px
      color:#55545d
</style>
